import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { withRouter } from 'react-router-dom';
import { SearchBar, Icon, tools } from "weaver-mobile";
import { SearchAdvanced } from "weaver-mobile-page";
import { toJS } from "mobx";

const { getLabel } = tools;

@withRouter
@inject("searchStore")
@observer
class SearchConponent extends Component {
  static defaultProps = {
    prefixCls: "odoc-com-search"
  }

  constructor(props) {
    super(props)
    this.getExtraButton = this.getExtraButton.bind(this)
    this.formData = {};
  }

  componentWillMount() {
    const { searchStore, pathname } = this.props;
    searchStore.setSearchPath(pathname);
  }

  componentDidMount() {
    const { searchStore, getCondition } = this.props;
    searchStore.getSearchCondition(getCondition);
  }

  componentWillUnmount() {
    const { searchStore } = this.props;
    searchStore.setSearchValue("");
  }

  render() {
    const { history, searchStore, prefixCls, baseSearchKey, title, showHotSearch = false } = this.props;
    const { search, updateAdSearchSubject, searchFormChange, searchAdValue, searchHotTerm } = searchStore;
    const seachTitle = title ? title : getLabel(500351, "请输入关键字");
    let showHotItem = false;
    return (
      <div className={prefixCls} >
        <SearchBar
          className="search-select"
          placeholder={seachTitle}
          showExtraButton
          extraButton={this.getExtraButton()}
          onExtraButtonClick={(key) => history.push(search.path)}
          onChange={val => updateAdSearchSubject(val, baseSearchKey)}
          value={searchAdValue}
          onSubmit={(value) => this.onSearch(value, true)}
        />

        <SearchAdvanced
          store={search}
          onChange={(condition, value) => searchFormChange(condition, value, baseSearchKey)}
          buttonGroupData={this.getSearchFormBtn()}
        />

        {
          showHotItem && this.getHotSearchBar()
        }
      </div>
    )
  }

  getHotSearchBar = () => {
    const { prefixCls, searchStore } = this.props;
    const { searchHotTerm } = searchStore;
    return (
      <div className={`${prefixCls}-hotSearch`}>
        <div className={`${prefixCls}-hotSearch-title`}>{searchHotTerm.title}</div>
        <div className={`${prefixCls}-hotSearch-items`}>
          {
            searchHotTerm.dataList.map((item, index) => {
              if (index < 4) {
                return (
                  <div className={`${prefixCls}-hotSearch-items-searchItem`} key={index} onClick={() => this.onSearch(item, true)}>
                    {item}
                  </div>
                )
              }
            })
          }
        </div>
      </div>
    )
  }

  getSearchFormBtn = () => {
    const { searchStore } = this.props;
    const { searchFormReset } = searchStore;
    const btns = [
      { key: 'reset', text: getLabel(2022, "重置"), onClick: () => searchFormReset() },
      { key: 'submit', text: getLabel(388113, "搜索"), onClick: () => this.onSearch(), type: 'primary', }
    ]
    return btns;
  }

  getExtraButton = () => {
    const { extraButton = [] } = this.props;
    let iconBtn = [];
    if (extraButton.indexOf("advanced") > -1) {
      iconBtn.push({ key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> })
    } else if (extraButton.indexOf("selected") > -1) {
      iconBtn.push({ key: 'selected', show: <Icon key="filter-o-hot" type="filter-o-hot" /> })
    } else if (extraButton.indexOf("drop") > -1) {
      iconBtn.push({ key: 'drop', show: <Icon key="ellipsis" type="ellipsis" /> })
    }
    return iconBtn;
  }

  //搜索
  onSearch = (item, isHot = false) => {
    const { getSearchData, searchStore, baseSearchKey, forward, history } = this.props;
    let formDatas = this.getFormData(toJS(searchStore.search.form.formParams))
    if (item) {
      formDatas[baseSearchKey] = item;
      searchStore.setSearchValue(item);
      searchStore.search.form.updateField(baseSearchKey, item);
    }
    if (!forward && !isHot) history.go(-1);
    getSearchData(formDatas);
    this.formData = {}
  }

  //将组件的数据进行处理 
  getFormData = (data) => {
    for (let key in data) {
      if (typeof data[key] == "string") {
        this.formData[key] = data[key];
      } else if (typeof data[key] == "object") {
        if (data[key].length) {
          let ids = [];
          for (let i in toJS(data[key])) {
            ids.push(data[key][i].id);
          }
          this.formData[key] = ids.join(",");
        } else {
          this.getFormData(data[key])
        }
      }
    }
    return this.formData
  }
}

export default SearchConponent;